<template>
	<view class="trading">
		<view class="tabs">
			<u-tabs :list="tabList" :is-scroll="false" :current="active" @change="onChange"></u-tabs>
		</view>
		<view class="l-list">
			<view class="price">
				<view class="title">
					{{$t('otc.name11')}}
				</view>
				<view class="price-box flex">
					<view class="lt-input">
						<u--input v-model="params.point" border="none" placeholder="0.0" fontSize="30"
							type="number"></u--input>
					</view>
					<view class="">
						U
					</view>
				</view>
				<view class="" style="color: #999;font-size: 24rpx;">
					{{$t('vnode.name18')}}：{{ruleList.min_price}} ~ {{ruleList.max_price}}
				</view>
			</view>
			<view class="number">
				<view class="price">
					<view class="title">{{$t('otc.name5')}}</view>

					<view class="price-box" style="margin-bottom: 10rpx;">
						<view class="lt-input">
							<u--input v-model="params.num" border="none" placeholder="0" fontSize="30"
								type="number"></u--input>
						</view>
					</view>
					<view class="" style="color: #999;font-size: 24rpx;">
						{{$t('otc.name20')}}：{{ruleList.min}} ~ {{ruleList.max}}
					</view>
				</view>
				<!-- <view class="balance">
					火豆余额 9,888.06
				</view> -->
				<!-- <view class="Kede">
					总价 ${{params.point * params.num}}
				</view> -->
			</view>
			<view class="number">
				<view class="price">
					<view class="title">{{$t('otc.name7')}}</view>

					<view class="price-box" style="margin-bottom: 10rpx;">
						<view class="lt-input">
							<u--input :disabled="params.num ? false : true" v-model="params.min" border="none"
								placeholder="0" fontSize="30" type="number"></u--input>
						</view>
					</view>
					<view class="" style="color: #999;font-size: 24rpx;">
						{{$t('otc.name5')}}<{{params.num}} </view>
					</view>
					<!-- <view class="balance">
					火豆余额 9,888.06
				</view> -->
					<!-- <view class="Kede">
					总价 ${{params.point * params.num}}
				</view> -->
					<view class="" v-if="active == '1'">
						<view class=""
							style="font-weight: 500;font-size: 32rpx;color: #333333;margin: 40rpx 0 20rpx 0;">
							{{$t('otc.name19')}}
						</view>
						<u-radio-group v-model="radio">
							<u-radio v-for="(item, index) in ruleList.pay" :key="index" :name="item.id"
								:disabled="item.disabled" style="margin: 0 15rpx;">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<!-- <view class="paymentType flex-between" style="padding-right: 20rpx;">
				<view class="lt">支付方式</view>
				<view class="flex rt">
					<u-checkbox-group v-model="checkboxValue1" placement="row" @change="checkboxChange" >
						<u-checkbox :customStyle="{margin: '3px'}" v-for="(item, index) in checkboxList1"
							:key="index" :label="item.name" :name="item.value">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view> -->
			</view>
			<view class="button">
				<u-button type="primary" :text="$t('otc.name3')" shape="circle" @click="submit"></u-button>
			</view>
			<u-action-sheet :actions="currencyList" :title="$t('otc.name19')" :show="show" :cancelText="$t('vnode.name10')" @close="closeCurrency"
				@select="handleSelect"></u-action-sheet>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				// tab
				tabList: [{
						name:this.$t('otc.name8'),
						state: 0,
						type: 'user_id'
					},
					{
						name: this.$t('otc.name9'),
						state: 1,
						type: 'sellid'
					},
				],
				active: 0,
				ruleList: {},
				// 购买数据
				orderList: [],
				params: {
					wid: '',
					point: '',
					num: '',
					type: 'user_id',
					min: ''
					// pay_type:'',
				},
				show: false,
				currencyList: [],
				name: "",
				checkboxValue1: [],
				checkboxList1: [{
						name: '微信',
						disabled: false,
						value: 'wechat'
					},
					{
						name: '支付宝',
						disabled: false,
						value: 'alipay'
					},
					{
						name: '银行卡',
						disabled: true,
						value: 'bank'
					},
					{
						name: 'USDT',
						disabled: true,
						value: 'usdt'
					}
				],
				payList: [],
				radio: ''
			}
		},
		computed: {},
		onShow() {},
		onReachBottom() {
			this.upOption.page.num += 1
			console.log(this.upOption.page.num)
			if (this.upOption.page.num != 0) {
				this.getList(this.upOption.page)
			}
		},
		async onLoad(options) {
			uni.setNavigationBarTitle({
				title:this.$t('otc.name3')
			})
			this.params.wid = options.wid
			this.active = options.active
			this.params.type = this.tabList[options.active].type
			const res = await this.$fun.ajax.post('otc/walletInfo', {
				wid: options.wid
			})
			this.ruleList = res.data
		},
		methods: {
			// checkboxChange(n) {
			// 	this.params.pay_type = n.join(',')
			// },
			closeCurrency() {
				this.show = false
			},
			// 选择币种
			handleSelect(e) {
				// this.params.wid = e.id
				// this.name = e.name
			},
			async submit() {
				const {
					point,
					num,
					wid,
					min,
					// pay_type
				} = this.params
				if (!point) return this.$fun.msg(this.$t('vnode.name17'))
				if (!num) return this.$fun.msg(this.$t('otc.name13'))
				// if (!pay_type) return this.$fun.msg('请选择支付方式')
				if (!(this.ruleList.min_price <= point && point <= this.ruleList.max_price)) return this.$fun.msg(
					this.$t('otc.name21'))
				if (!(this.ruleList.min <= num && num <= this.ruleList.max)) return this.$fun.msg('你输入的数量不在区间')
				if (!min) return this.$fun.msg(this.$t('otc.name22'))
				if (+min > +num) return this.$fun.msg(this.$t('otc.name23'))
				if (!this.radio && this.active != 0) return this.$fun.msg(this.$t('otc.name19'))
				// if (!wid)  return this.$fun.msg('请选择币种')
				const res = await this.$fun.ajax.post('otc/buyer', {
					...this.params,pay_id:this.radio
				})
				this.$fun.msg(res.msg);
				if (res.code == 1) {
					this.$fun.jump(`/pageB/otcCenter/otcCenter?wid=${this.params.wid}`, 3, 500)
				}
				// if(res.code == 201){
				// 	this.$fun.jump('/pageA/authentication/authentication', 0, 500)
				// }
			},
			close(e) {
				this.params = {
					wid: e.id,
					point: '',
					num: '',
					type: e.type,
				}
			},
			onChange(e) {
				this.params.point = '',
					this.params.num = '',
					this.params.type = e.type
				this.params.min = ''
				this.active = e.state
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.trading {
		.tabs {
			background-color: #fff;
			margin-bottom: 20rpx;
		}

		.l-list {
			padding: 0 30rpx;

			.price {
				height: 221rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 20rpx 0;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.price-box {
					.lt-input {
						flex: 1;
						border-bottom: 1rpx solid rgba(0, 0, 0, .2);
					}
				}
			}

			.number {
				// height: 353rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				margin: 20rpx 0;
				padding: 30rpx;

				.price {
					padding: 0;
					height: 150rpx;
				}

				.balance {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					line-height: 58rpx;
				}

				.Kede {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.paymentType {
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 0 10rpx 0 30rpx;

				.lt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}

				.rt {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
			}

		}

		.button {
			margin-top: 100rpx;
			padding: 0 30rpx;
		}
	}
</style>